Variables in Figma are reusable values that can be applied to supported design properties and prototype interactions. They help designers create flexible design systems, maintain consistent design tokens, and build advanced interactive prototypes with dynamic behavior.
Variables can store values such as text, numbers, colors, and Boolean states. In prototypes, variables can be changed through interactions, expressions, conditions, and variable modes, allowing interfaces to respond dynamically to user actions.
Learn professional UI/UX design and Figma prototyping with JustAcademy Figma Training and Register for Figma Course Demo.
A variable is a reusable value that can be stored once and applied to different parts of a Figma design or prototype. Instead of manually entering the same value in multiple places, designers can create a variable and reuse it wherever required.
For example, instead of manually entering the same brand color on multiple buttons, a designer can create a color variable such as color/primary and apply it to supported properties throughout the design.
Variable
↓
Reusable Value
↓
Multiple Design Elements
↓
Consistent Design
Variables make Figma designs easier to manage, update, scale, and prototype. They are particularly useful for design systems and advanced prototypes because reusable values can drive multiple design properties and interaction states.
Variables can be used as design tokens in a design system. Designers can store reusable values such as colors, spacing, dimensions, typography-related values, and component properties where supported.
Design System
↓
Variables
├── Colors
├── Spacing
├── Typography
├── Dimensions
└── Other Values
↓
Reusable Components
Variables become especially powerful when used with prototypes. A prototype interaction can modify a variable, and connected design properties can respond to the changed value.
User Action
↓
Trigger
↓
Set Variable
↓
Variable Value Changes
↓
Connected Design Properties Update
Figma variables commonly use four value types: String, Number, Boolean, and Color.
| Variable Type | Stores | Example | Common Use |
|---|---|---|---|
| String | Text values | "Welcome" | Dynamic text |
| Number | Numeric values | 100 | Counters, dimensions, calculations |
| Boolean | True/false values | true | States and visibility |
| Color | Color values | #2563EB | Colors and themes |
A String variable stores text. It can be used for dynamic content such as usernames, labels, product names, messages, headings, and other text-based values.
Variable Name: userName
Type: String
Value: "Manish"
String variables are useful when the same text value needs to be reused or changed during a prototype.
A Number variable stores numeric values. Number variables are useful for counters, quantities, prices, dimensions, progress values, and calculations.
Variable Name: cartCount
Type: Number
Value: 2
cartCount = cartCount + 1A Boolean variable stores either true or false. Boolean variables are useful for representing states such as menu open/closed, selected/unselected, enabled/disabled, or logged in/logged out.
Variable Name: menuOpen
Type: Boolean
Value: false
A Color variable stores a color value. Color variables are useful for design systems, themes, brand colors, backgrounds, text colors, borders, and other supported color properties.
Variable Name: colorPrimary
Type: Color
Value: #2563EB
| Static Value | Variable |
|---|---|
| Value is entered directly. | Value is stored and reusable. |
| Harder to update consistently. | Easier to maintain reusable values. |
| Usually represents a fixed value. | Can represent reusable or dynamic values. |
| Limited prototype behavior. | Can participate in prototype interactions. |
| Less suitable for complex dynamic prototypes. | Useful for advanced prototype behavior. |
A variable collection is a group of related variables. Collections help organize variables so that large design systems and complex prototypes remain easier to manage.
Variable Collection: E-Commerce
├── productName
├── productPrice
├── cartCount
├── cartTotal
└── isCartOpen
| Collection | Possible Variables |
|---|---|
| Colors | primary, secondary, background, text |
| Spacing | small, medium, large |
| Typography | headingSize, bodySize |
| E-Commerce | cartCount, cartTotal, productName |
| Theme | background, surface, text |
Good variable naming is important for maintaining a professional design system. Names should clearly communicate what the variable represents.
Good:
color/primary
color/background
spacing/small
spacing/medium
cart/count
user/name
theme/mode
Avoid:
color1
abc
test
value
newvariable
A structured naming convention makes variables easier to locate, understand, and maintain.
Category / Purpose / State
color / button / primary
color / button / hover
color / text / primary
spacing / layout / medium
component / button / height
Variables can be applied to supported design properties. Once a variable is applied, changing its value can update the connected property wherever that variable is used.
Variable
↓
Apply to Property
↓
Design Element
↓
Variable Value Changes
↓
Design Updates
A String variable can be applied to supported text content. This allows prototype content to change dynamically when the variable value changes.
Variable:
userName = "Manish"
Text Content:
User name value can be driven by the variable
String variables are useful for personalized greetings, product names, messages, labels, and localization experiments.
Number variables can be applied to supported numeric properties such as dimensions and other numerical design values.
Variable:
cardWidth = 320
Design:
Card Width = cardWidth
Changing the variable value can update the associated supported design property.
Boolean variables can be used with supported Boolean-compatible properties and prototype states.
Variable:
isMenuVisible = true
State:
Visible
If the variable changes to false, the associated supported property or prototype behavior can respond accordingly.
Color variables can be applied to supported color properties such as fills, strokes, and other color-based properties.
color/primary
↓
Button Fill
↓
Primary Button
Variables can represent design tokens such as colors, spacing, typography-related values, sizes, and other reusable design decisions.
Design Token
↓
Variable
↓
Component
↓
Multiple Screens
This approach helps maintain consistency throughout a product.
Variable modes can represent different contexts such as Light Mode and Dark Mode. The same variable can have different values for different modes.
Theme Collection
├── Light Mode
│ ├── Background
│ └── Text
└── Dark Mode
├── Background
└── Text
A variable can have multiple mode values, allowing the same variable to represent different values depending on the active context. Modes are useful for themes, brands, device contexts, languages, and other design variations.
| Variable | Light Mode | Dark Mode |
|---|---|---|
| Background | #FFFFFF | #111827 |
| Text | #111827 | #FFFFFF |
| Surface | #F3F4F6 | #1F2937 |
Variable modes can be changed during prototyping using the Set variable mode action. This allows an interaction to switch the active mode for the current page.
Click Theme Toggle
↓
Set Variable Mode
↓
Dark Mode
↓
Design Updates
Variables make prototypes more dynamic by allowing interactions to modify stored values. When a variable changes, connected design properties or prototype logic can respond accordingly.
User Action
↓
Trigger
↓
Set Variable
↓
Variable Changes
↓
UI Responds
The Set variable action allows a prototype interaction to set or modify the value of a variable. The value used should be compatible with the variable type.
On Click
↓
Set Variable
↓
Target: cartCount
↓
Value: cartCount + 1
String variables can be changed through prototype interactions to simulate dynamic text and selections.
Button: Select Apple
↓
On Click
↓
Set Variable
↓
productName = "Apple"
↓
Connected Content Updates
Number variables can represent quantities, counters, prices, scores, progress values, and other numerical states.
Click +
↓
Set Variable
↓
quantity = quantity + 1
↓
Quantity Display Updates
Boolean variables are useful for switching between two states.
Click Menu
↓
Set Variable
↓
menuOpen = true
↓
Menu State Updates
Another interaction can set the value to false to represent the closed state.
Color variables can help prototypes demonstrate theme changes, selected states, and dynamic visual properties.
Theme Toggle
↓
Set Variable / Set Variable Mode
↓
Color Values Change
↓
Updated UI Theme
Variables can work together with components and interactive component states. A variable can control supported properties while prototype interactions change the variable value.
Button Component
↓
Variable
↓
Component Property
↓
Set Variable
↓
Component Updates
Variables and component variants solve different problems but can work together. Variables can store dynamic values, while component variants can represent predefined component states and variations.
Variable Value
↓
Component Property
↓
Matching Component State
↓
Updated Component
A Boolean variable can be used with supported visibility behavior and prototype states. This is useful for menus, notifications, tooltips, badges, error messages, modals, and conditional content.
showNotification = true
↓
Notification State: Visible
showNotification = false
↓
Notification State: Hidden
Expressions allow variables to participate in supported calculations and dynamic prototype logic. They are especially useful with number values and conditional behavior.
itemCount = itemCount + 1
itemCount = itemCount - 1
cartTotal = price * quantity
Expressions can also be used with conditional logic to evaluate whether a condition is true or false.
Number variables can be used in mathematical expressions for counters, totals, dimensions, scores, and progress calculations.
quantity = quantity + 1
quantity = quantity - 1
total = price * quantity
remaining = total - discount
String variables can be used to represent dynamic text values. Designers can use them to simulate changing labels, selections, product names, and personalized content.
firstName = "Manish"
message = "Welcome " + firstName
Boolean logic can evaluate whether a condition is true or false and can be used to drive conditional prototype behavior.
IF cartCount > 0
Show Cart
ELSE
Show Empty Cart
Variables can store information while conditional actions use that information to determine what should happen next.
cartTotal = 1500
↓
Conditional
↓
IF cartTotal >= 1000
↓
Free Shipping
ELSE
↓
Shipping Fee
Variables are highly useful for creating e-commerce prototypes. Number variables can represent quantities, prices, discounts, shipping fees, and totals.
quantity = 2
price = 500
cartTotal = price * quantity
Result:
cartTotal = 1000
Click Add to Cart
↓
Set Variable
↓
quantity = quantity + 1
↓
Calculate cartTotal
↓
Update Cart State
↓
Checkout
Food delivery prototypes can use variables for selected restaurant, item quantity, delivery fee, discount, total price, and order status.
restaurantName = "Pizza House"
itemCount = 2
itemPrice = 300
deliveryFee = 50
total = itemCount * itemPrice + deliveryFee
Banking prototypes can use variables to represent balances, transaction amounts, selected beneficiaries, transaction status, and confirmation states.
accountBalance = 50000
transferAmount = 5000
remainingBalance = accountBalance - transferAmount
Variables can store the user's score, selected answer, question number, and result state.
score = 0
questionNumber = 1
answerCorrect = false
IF answerCorrect == true
score = score + 1
A Number variable can represent the current onboarding step in a prototype.
currentStep = 1
Next Button
↓
currentStep = currentStep + 1
↓
Show Next Onboarding State
Boolean variables can represent whether a user is logged in or logged out.
isLoggedIn = false
Click Login
↓
Set Variable
↓
isLoggedIn = true
↓
Show Dashboard State
menuOpen = false
Click Menu
↓
Set Variable
↓
menuOpen = true
↓
Menu State Updates
A close interaction can set the same variable back to false.
A Boolean variable can represent whether a product, article, or post has been added to favorites.
isFavorite = false
Click Heart
↓
Set Variable
↓
isFavorite = true
↓
Favorite State
Boolean variables can represent notification states.
showNotification = false
Click Save
↓
Set Variable
↓
showNotification = true
↓
Success Notification State
A String variable can represent the currently selected tab.
selectedTab = "Home"
Click Profile
↓
Set Variable
↓
selectedTab = "Profile"
↓
Profile Tab Becomes Active
A String variable can represent the selected dropdown option.
selectedCountry = "India"
Click USA
↓
Set Variable
↓
selectedCountry = "USA"
↓
Dropdown State Updates
Variables can store filter selections such as category, price range, sort order, or selected status.
selectedCategory = "Electronics"
Apply Filter
↓
Set Variable
↓
selectedCategory
↓
Filtered Prototype State
Light and dark themes can be represented using variable modes. A theme toggle can use the Set variable mode action to switch the current page between modes.
Theme Toggle
↓
Set Variable Mode
↓
Dark Mode
↓
Background / Text / Surface Update
Variables can be used as reusable values in responsive design systems. For example, reusable spacing and dimension values can help maintain consistency across different layouts.
Spacing Variable
↓
Desktop Layout
↓
Tablet Layout
↓
Mobile Layout
String variables can be used to experiment with different text values and languages. This can help designers preview how interface content changes when different language strings are used.
Language Content
↓
String Variables
↓
English / Hindi / Other Language
↓
Updated Text Content
Variable modes allow the same variables to have different values depending on the active mode. This is especially useful for light and dark themes or other contextual design variations.
| Variable | Light | Dark |
|---|---|---|
| Background | White | Dark Gray |
| Text | Dark | White |
| Primary | Blue | Light Blue |
When a variable collection contains multiple modes, the appropriate mode can be selected for the relevant design or prototype context.
Variable Collection
↓
Mode Selection
↓
Light / Dark / Other Context
↓
Applied Variable Values
↓
Design Updates
The Set variable mode action changes the active variable mode of the current page during prototyping. This is useful for interactions such as theme switching.
Click Theme Toggle
↓
Set Variable Mode
↓
Select Dark Mode
↓
Current Page Uses Dark Mode
Variable modes can provide different values for the same variable depending on the active context. These values can participate in supported prototype expressions and interactions.
Variable Collection
↓
Variable
↓
Active Mode
↓
Variable Value
↓
Expression / Prototype Logic
↓
Result
Variables are useful for representing prototype state. Instead of creating separate frames for every possible value or state, a variable can store information and connected properties can respond to it.
State
├── Default
├── Selected
├── Active
├── Disabled
└── Completed
| Variables | Component Variants |
|---|---|
| Store reusable values. | Represent predefined component variations. |
| Can use String, Number, Boolean, and Color values. | Represent reusable component states and configurations. |
| Useful for dynamic data and values. | Useful for predefined UI states. |
| Can participate in expressions and prototype logic. | Can be switched through component interactions and properties. |
| Can support multiple modes. | Can contain multiple variants. |
Variables and components can be combined to create reusable and dynamic UI systems. A variable can control supported component properties while interactions can change the variable.
User Interaction
↓
Set Variable
↓
Component Property Changes
↓
Component State Updates
↓
UI Updates
Expressions make variables more powerful by allowing supported calculations and dynamic values. They can be used with Set variable actions and conditional logic.
Set Variable:
cartTotal = price * quantity
Conditional:
IF cartTotal >= 1000
Free Shipping
A prototype trigger can contain multiple actions. A variable can be updated as one action while another action changes the prototype presentation or navigation state.
On Click
↓
Set Variable
↓
Update State
↓
Open Overlay
↓
Show Result
Create a product selector using a String variable.
Variable:
selectedProduct = "Apple"
Apple Button
↓
Set Variable
↓
selectedProduct = "Apple"
Orange Button
↓
Set Variable
↓
selectedProduct = "Orange"
A connected text value or prototype state can represent the selected product.
Use a Number variable for a product quantity counter.
quantity = 1
Click +
↓
quantity = quantity + 1
Click -
↓
quantity = quantity - 1
The displayed quantity can respond to the variable value.
price = 500
quantity = 2
cartTotal = price * quantity
Result:
cartTotal = 1000
This can be extended with discounts, taxes, shipping fees, and conditional free-shipping rules.
Light Mode
↓
Click Toggle
↓
Set Variable Mode
↓
Dark Mode
↓
Theme Values Update
showNotification = false
Click Save
↓
Set Variable
↓
showNotification = true
↓
Success Message State
isLoggedIn = false
Click Login
↓
Set Variable
↓
isLoggedIn = true
↓
Conditional
↓
IF isLoggedIn
↓
Dashboard
ELSE
↓
Login Error
score = 0
Correct Answer
↓
Set Variable
↓
score = score + 1
↓
Next Question
Final Question
↓
Conditional
↓
Display Result
itemCount = 0
itemPrice = 250
deliveryFee = 50
Add Food
↓
itemCount = itemCount + 1
↓
subtotal = itemCount * itemPrice
↓
total = subtotal + deliveryFee
↓
Checkout
balance = 50000
transferAmount = 5000
Confirm Transfer
↓
Conditional
↓
IF transferAmount <= balance
↓
balance = balance - transferAmount
↓
Success
ELSE
↓
Insufficient Balance
selectedCategory = "All"
Click Electronics
↓
Set Variable
↓
selectedCategory = "Electronics"
↓
Update Filtered State
Variables can help designers test different content states, text lengths, visibility conditions, and UI states. This can help identify layouts that break when content or state changes.
Professional prototypes should not only demonstrate the ideal flow. Variables can help simulate edge cases such as empty carts, maximum quantities, incorrect login states, failed transactions, long usernames, and unavailable products.
Normal State
↓
Variable Changes
↓
Edge Case
↓
Conditional
↓
Error / Empty / Success State
Identify Reusable Value
↓
Create Collection
↓
Create Variable
↓
Select Variable Type
↓
Set Initial Value
↓
Apply Variable
↓
Create Prototype Interaction
↓
Set Variable
↓
Test
↓
Refine
Create Variables
↓
Create Modes
↓
Apply Variables
↓
Create Components
↓
Create Prototype Triggers
↓
Set Variable
↓
Use Expressions
↓
Use Conditionals
↓
Test States
↓
Test Edge Cases
↓
Finalize Prototype
| Concept | Meaning |
|---|---|
| Variable | Reusable stored value. |
| String | Stores text values. |
| Number | Stores numeric values. |
| Boolean | Stores true or false values. |
| Color | Stores color values. |
| Collection | Group of related variables. |
| Mode | Alternative value set for variables. |
| Set Variable | Changes a variable value during prototyping. |
| Set Variable Mode | Changes the active variable mode. |
| Expression | Calculates or manipulates supported variable values. |
| Conditional | Uses logic based on values or conditions. |
Variables are one of the most powerful features for creating scalable design systems and advanced prototypes in Figma. They allow designers to store reusable values, apply those values across supported design properties, create different modes, modify prototype state during interactions, and build dynamic experiences without creating a separate frame for every possible state.
By combining Variables with Triggers, Actions, Expressions, Conditionals, Variable Modes, Components, and Prototyping, designers can create realistic interactive experiences such as e-commerce applications, banking applications, food delivery apps, quizzes, dashboards, onboarding flows, and theme-switching interfaces.
Recommended Learning: JustAcademy Figma Training | Register for Figma Course Demo
